<template>
	 <div class="app-container">
		 <el-row :gutter="20">
		    <!--区域数据-->
		    <el-col :span="3" :xs="24">
				<div class="head-container">
				   <el-input
				      v-model="regionName"
				      placeholder="请输入区域名称"
				      clearable
				      prefix-icon="Search"
				      style="margin-bottom: 20px"
				   />
				</div>
				<div class="head-container">
				   <el-tree
				      :data="regionOptions"
				      :props="{ label: 'label', children: 'children' }"
				      :expand-on-click-node="false"
				      :filter-node-method="filterNode"
				      ref="regionTreeRef"
				      node-key="id"
				      highlight-current
				      :default-expanded-keys="defaultExpandedArr"
				      @node-click="handleNodeClick"
				   />
				</div>
			</el-col>
			<!--设备数据-->
			<el-col :span="20" :xs="24">
				<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
				   <el-form-item>
					   <el-form-item label="物理码" prop="physicalAddress">
					      <el-input
					         v-model="queryParams.physicalAddress"
					         placeholder="请输入物理码"
					         clearable
					         style="width: 140px"
					         @keyup.enter="handleQuery"
					      />
					   </el-form-item>
					   <el-form-item label="资源编码" prop="resourceCode">
					      <el-input
					         v-model="queryParams.resourceCode"
					         placeholder="资源编码"
					         clearable
					         style="width: 140px"
					         @keyup.enter="handleQuery"
					      />
					   </el-form-item>
					   <el-form-item label="状态" prop="status">
					      <el-select
					         v-model="queryParams.status"
					         placeholder="设备状态"
					         clearable
					         style="width: 140px"
					      >
						 <el-option
							v-for="dict in sys_terminal_status"
							:key="dict.value"
							:label="dict.label"
							:value="dict.value"
						 />
					      </el-select>
					   </el-form-item>
					   <el-form-item label="时间" style="width: 320px;">
					      <el-date-picker
					         v-model="dateRange"
					         value-format="YYYY-MM-DD"
					         type="daterange"
					         range-separator="-"
					         start-placeholder="开始日期"
					         end-placeholder="结束日期"
					      ></el-date-picker>
					   </el-form-item>
				   </el-form-item>
				   <el-form-item>
				      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
				   </el-form-item>
				</el-form>
				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
					   <el-button
					      type="primary"
					      plain
					      icon="Plus"
					      @click="handleAdd"
					      v-hasPermi="['equipment:terminal:add']"
					   >新增</el-button>
					</el-col>
				</el-row>
				<el-table v-loading="loading" :data="terminalList" @selection-change="handleSelectionChange">
				   <el-table-column type="selection" width="50" align="center" />
				   <el-table-column label="物理码" align="center" key="physicalAddress" prop="physicalAddress" v-if="columns[0].visible" />
				   <el-table-column label="名称" align="center" key="name" prop="name" v-if="columns[1].visible" :show-overflow-tooltip="true" />
				   <el-table-column label="序列号" align="center" key="serialNum" prop="serialNum" v-if="columns[2].visible" :show-overflow-tooltip="true" />
				   <el-table-column label="资源编码" align="center" key="resourceCode" prop="resourceCode" v-if="columns[3].visible" :show-overflow-tooltip="true" />
				   <el-table-column label="类型" align="center" key="type" prop="type" v-if="columns[4].visible" width="120" />
				   <el-table-column label="协议" align="center" key="xtype" prop="xtype" v-if="columns[5].visible" width="120" />
				   <el-table-column label="厂家" align="center" key="manufactor" prop="manufactor" v-if="columns[6].visible" width="120" />
				   <el-table-column label="行政所属" align="center" key="regionId" prop="regionId" v-if="columns[7].visible" width="120" />
				   <el-table-column label="详细地址" align="center" key="address" prop="address" v-if="columns[8].visible" width="120" />
				   <el-table-column label="经度" align="center" key="longitude" prop="longitude" v-if="columns[9].visible" width="120" />
				   <el-table-column label="纬度" align="center" key="latitude" prop="latitude" v-if="columns[10].visible" width="120" />
				   <el-table-column label="证书号" align="center" key="certSn" prop="certSn" v-if="columns[11].visible" width="120" />
				   <el-table-column label="状态" align="center" key="status" v-if="columns[12].visible">
				      <template #default="scope">
				           <dict-tag :options="sys_terminal_status" :value="scope.row.status" />
				      </template>
				   </el-table-column>
				   <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[13].visible" width="160">
				      <template #default="scope">
				         <span>{{ parseTime(scope.row.createTime) }}</span>
				      </template>
				   </el-table-column>
				   <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
				      <template #default="scope">
						 <el-tooltip content="详情" placement="top" >
						     <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['equipment:terminal:detail']"></el-button>
						 </el-tooltip>
				         <el-tooltip content="修改" placement="top" >
				            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['equipment:terminal:edit']"></el-button>
				         </el-tooltip>
				         <el-tooltip content="删除" placement="top" >
				            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['equipment:terminal:del']"></el-button>
				         </el-tooltip>
				      </template>
				   </el-table-column>
				</el-table>
				<pagination
				   v-show="total > 0"
				   :total="total"
				   v-model:page="queryParams.pageNum"
				   v-model:limit="queryParams.pageSize"
				   @pagination="getList"
				/>
			</el-col>	
		</el-row>
		
		<!-- 修改设备信息对话框 -->
		<el-dialog :title="title" v-model="open" width="600px" append-to-body>
		   <el-form :model="form" :rules="rules" ref="terminalRef" label-width="80px">
		      <el-row>
		         <el-col :span="12">
		            <el-form-item label="物理地址" prop="physicalAddress">
		               <el-input v-model="form.physicalAddress" placeholder="物理地址" maxlength="30" />
		            </el-form-item>
		         </el-col>
				 <el-col :span="12">
				    <el-form-item label="终端名称" prop="name">
				       <el-input v-model="form.name" placeholder="请输入终端名称" maxlength="30" />
				    </el-form-item>
				 </el-col>
			   </el-row>
			   <el-row>
			      <el-col :span="12">
			         <el-form-item label="序列号" prop="serialNum">
			            <el-input v-model="form.serialNum" placeholder="终端序列号" maxlength="30" />
			         </el-form-item>
			      </el-col>
				 <el-col :span="12">
					<el-form-item label="资源编码" prop="resourceCode">
					   <el-input v-model="form.resourceCode" placeholder="终端资源编码" maxlength="30" />
					</el-form-item>
				 </el-col>
			    </el-row>
				 <el-row>
				    <el-col :span="12">
				       <el-form-item label="终端类型" prop="type">
				          <el-input v-model="form.type" placeholder="终端类型" maxlength="30" />
				       </el-form-item>
				    </el-col>
				 	 <el-col :span="12">
				 		<el-form-item label="协议类型" prop="xtype">
				 		   <el-input v-model="form.xtype" placeholder="协议类型" maxlength="30" />
				 		</el-form-item>
				 	 </el-col>
				  </el-row>
				  <el-row>
				     <el-col :span="12">
				        <el-form-item label="生产厂家" prop="manufactor">
				           <el-input v-model="form.manufactor" placeholder="终端生产厂家" maxlength="30" />
				        </el-form-item>
				     </el-col>
					 <el-col :span="12">
					    <el-form-item label="归属区域" prop="regionId">
					       <el-tree-select
					          v-model="form.regionId"
					          :data="regionOptions"
					          :props="{ value: 'id', label: 'label', children: 'children' }"
					          value-key="id" :filterable=true
					          placeholder="请选择归属区域"
					          check-strictly
					          node-key="id"
					          :default-expanded-keys="defaultExpandedArr"
					       />
					    </el-form-item>
					  </el-col>
				   </el-row>
				   <el-row>
					  <el-col :span="12">
						 <el-form-item label="详细地址" prop="address">
							<el-input v-model="form.address" placeholder="终端详细地址" maxlength="30" />
						 </el-form-item>
					  </el-col>
					 <el-col :span="12">
						<el-form-item label="终端经度" prop="longitude">
						   <el-input v-model="form.longitude" placeholder="终端经度" maxlength="30" />
						</el-form-item>
					 </el-col>
					</el-row>
					<el-row>
					  <el-col :span="12">
						 <el-form-item label="终端纬度" prop="latitude">
							<el-input v-model="form.latitude" placeholder="终端纬度" maxlength="30" />
						 </el-form-item>
					  </el-col>
					 <el-col :span="12">
						<el-form-item label="证书号" prop="certSn">
						   <el-input v-model="form.certSn" placeholder="证书号" maxlength="30" />
						</el-form-item>
					 </el-col>
					</el-row>
		   </el-form>
		   <template #footer>
		      <div class="dialog-footer">
		         <el-button type="primary" @click="submitForm">确 定</el-button>
		         <el-button @click="cancel">取 消</el-button>
		      </div>
		   </template>
		</el-dialog>
		
		<!-- 设备详细 -->
		<el-dialog  title="设备详细" v-model="detailFlag" width="1000px" append-to-body>
		   <el-form :model="form" label-width="100px">
		      <el-row>
		         <el-col :span="6">
		            <el-form-item label="物理码：">{{ form.physicalAddress }}</el-form-item>
		         </el-col>
				 <el-col :span="6">
				    <el-form-item label="资源编码：">{{ form.resourceCode}}</el-form-item>
				 </el-col>
		         <el-col :span="6">
		            <el-form-item label="设备名称：">{{ form.name}}</el-form-item>
		         </el-col>
				 <el-col :span="6">
				    <el-form-item label="序列号：">{{ form.serialNum }}</el-form-item>
			     </el-col>
		      </el-row>
			  <el-row>
			     <el-col :span="6">
			        <el-form-item label="设备类型：">{{ form.type }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="协议类型：">{{ form.xtype }}</el-form-item>
				 </el-col>
			     <el-col :span="6">
			        <el-form-item label="行政所属：">{{ form.regionId }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="详细地址：">{{ form.address }}</el-form-item>
			     </el-col>
			  </el-row>
			  <el-row>
			     <el-col :span="6">
			        <el-form-item label="经度：">{{ form.longitude }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="纬度：">{{ form.latitude }}</el-form-item>
				 </el-col>
			     <el-col :span="6">
			        <el-form-item label="证书号：">{{ form.certSn }}</el-form-item>
			     </el-col>
			  </el-row>
			  
			  <el-row>
			     <el-col :span="6">
			        <el-form-item label="设备音量：">{{ form.volume }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="设备IP：">{{ form.ip }}</el-form-item>
				 </el-col>
			     <el-col :span="6">
			        <el-form-item label="子网掩码：">{{ form.mask }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
				    <el-form-item label="设备网关：">{{ form.gateway }}</el-form-item>
				 </el-col>
			  </el-row>
			  <el-row>
			     <el-col :span="6">
			        <el-form-item label="调频信号状态：">{{ form.fmStatus }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="有线信号状态：">{{ form.dvbcStatus }}</el-form-item>
				 </el-col>
			     <el-col :span="6">
			        <el-form-item label="地面无线信号状态：">{{ form.dtmbStatus }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="有线频率：">{{ form.dvbcFreq }}</el-form-item>
				 </el-col>
			  </el-row>
			  <el-row>
			     <el-col :span="6">
			        <el-form-item label="地面无线频率：">{{ form.dtmbFreq }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="硬件版本：">{{ form.hardVersion }}</el-form-item>
				 </el-col>
			     <el-col :span="6">
			        <el-form-item label="软件版本：">{{ form.softVersion }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="FM 频点扫描列表：">{{ form.fmList }}</el-form-item>
				 </el-col>
			  </el-row>
			  <el-row>
			     <el-col :span="6">
			        <el-form-item label="地面无线频率：">{{ form.dtmbFreq }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="硬件版本：">{{ form.hardVersion }}</el-form-item>
				 </el-col>
			     <el-col :span="6">
			        <el-form-item label="软件版本：">{{ form.softVersion }}</el-form-item>
			     </el-col>
				 <el-col :span="6">
					<el-form-item label="FM 频点扫描列表：">{{ form.fmList }}</el-form-item>
				 </el-col>
			  </el-row>
		   </el-form>
		   <template #footer>
		      <div class="dialog-footer">
		         <el-button @click="detailFlag = false">关 闭</el-button>
		      </div>
		   </template>
		</el-dialog>
	 </div>
</template>

<script setup name="terminal">
	import { getToken } from "@/utils/auth";
	import {listTerminal,regionTreeSelect,updateTerminal,addTerminal} from "@/api/equipment/terminal";
	
	const router = useRouter();
	const { proxy } = getCurrentInstance();
	const {sys_terminal_status} = proxy.useDict("sys_terminal_status");
	const regionOptions = ref(undefined);
	const regdefaultExpandedArrionName = ref("");
	const regionName = ref("");
	const defaultExpandedArr = ref([]);
	const showSearch = ref(true);
	const terminalList = ref([]);
	const loading = ref(true);
	const ids = ref([]);
	const single = ref(true);
	const multiple = ref(true);
	const total = ref(0);
	const dateRange = ref([]);
	const open = ref(false);
	const title = ref("");
	const flag = ref(true);
	const detailFlag = ref(false);
	
	const data = reactive({
	  form: {},
	  queryParams: {
	    pageNum: 1,
	    pageSize: 10,
	    regionId: undefined,
		physicalAddress: undefined,
		status: status,
		resourceCode: undefined
	  },
	   rules: {}
	});
	const { queryParams, form, rules } = toRefs(data);
	// 列显隐信息
	const columns = ref([
	  { key: 0, label: `物理码`, visible: true },
	  { key: 1, label: `终端名称`, visible: true },
	  { key: 2, label: `序列号`, visible: true },
	  { key: 3, label: `资源编码`, visible: true },
	  { key: 4, label: `类型`, visible: true },
	  { key: 5, label: `协议类型`, visible: true },
	  { key: 6, label: `厂家`, visible: true },
	  { key: 7, label: `行政所属`, visible: true },
	  { key: 8, label: `详细地址`, visible: true },
	  { key: 9, label: `经度`, visible: true },
	  { key: 10, label: `纬度`, visible: true },
	  { key: 11, label: `证书号`, visible: true },
	  { key: 12, label: `状态`, visible: true },
	  { key: 13, label: `创建时间`, visible: true }
	]);
	/** 通过条件过滤节点  */
	const filterNode = (value, data) => {
	  if (!value) return true;
	  return data.label.indexOf(value) !== -1;
	};
	
	/** 根据名称筛选区域树 */
	watch(regionName, val => {
	  proxy.$refs["regionTreeRef"].filter(val);
	});
	
	/** 选择条数  */
	function handleSelectionChange(selection) {
	  ids.value = selection.map(item => item.userId);
	  single.value = selection.length != 1;
	  multiple.value = !selection.length;
	};
	
	/** 查询区域下拉树结构 */
	function getRegionTree() {
	  regionTreeSelect().then(response => {
	    regionOptions.value = response.data;
	    response.data.forEach((item) => {
	      defaultExpandedArr.value.push(item.id);
	    });
	  });
	};
	
	/** 节点单击事件 */
	function handleNodeClick(data) {
	  queryParams.value.regionId = data.id;
	  handleQuery();
	};
	
	/** 删除按钮操作 */
	function handleDelete(row) {
	  const name = row.name;
	  proxy.$modal.confirm('是否删除设备:"' + name + '"的数据项？').then(function () {
	    return delUser(row.physicalAddress);
	  }).then(() => {
	    getList();
	    proxy.$modal.msgSuccess("删除成功");
	  }).catch(() => {});
	};
	
	/** 取消按钮 */
	function cancel() {
	  open.value = false;
	  reset();
	};
	
	/** 新增按钮操作 */
	function handleAdd() {
	  reset();
	  open.value = true;
	  flag.value = true;
	  title.value = "添加设备";
	};
	
	/** 设备修改  */
	function handleUpdate(row) {
		reset();
	    open.value = true;
		flag.value = false;
		title.value = "修改设备";
		form.value.physicalAddress = row.physicalAddress;
		form.value.name = row.name;
		form.value.serialNum = row.serialNum;
		form.value.resourceCode = row.resourceCode;
		form.value.type = row.type;
		form.value.xtype = row.xtype;
		form.value.manufactor = row.manufactor;
		form.value.regionId = row.regionId;
		form.value.address = row.address;
		form.value.longitude = row.longitude;
		form.value.latitude = row.latitude;
		form.value.certSn = row.certSn;
		form.value.status = row.status;	
	};
	
	/** 查询列表 */
	function getList() {
	  loading.value = true;
	  listTerminal(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
	    loading.value = false;
	    terminalList.value = res.rows;
	    total.value = res.total;
	  });
	};
	
	/** 搜索按钮操作 */
	function handleQuery() {
	  queryParams.value.pageNum = 1;
	  getList();
	};
	
	/** 重置按钮操作 */
	function resetQuery() {
	  dateRange.value = [];
	  proxy.resetForm("queryRef");
	  queryParams.value.regionId = undefined;
	  proxy.$refs.regionTreeRef.setCurrentKey(null);
	  handleQuery();
	};
	
	/** 重置操作表单 */
	function reset() {
	  form.value = {
	    physicalAddress: undefined,
	    name: undefined,
	    serialNum: undefined,
	    resourceCode: undefined,
	    type: undefined,
	    xtype: undefined,
	    manufactor: undefined,
	    regionId: undefined,
	    address: undefined,
	    longitude: undefined,
	    latitude: undefined,
	    certSn: undefined,
	    status: undefined
	  };
	  proxy.resetForm("terminalRef");
	};
	/** 提交按钮 */
	function submitForm() {
	  proxy.$refs["terminalRef"].validate(valid => {
	    if (valid) {
	      if (flag.value != true) {
	        updateTerminal(form.value).then(response => {
	          proxy.$modal.msgSuccess("修改成功");
	          open.value = false;
	          getList();
	        });
	      } else {
	        addTerminal(form.value).then(response => {
	          proxy.$modal.msgSuccess("新增成功");
	          open.value = false;
	          getList();
	        });
	      }
	    }
	  });
	};
	/** 详细按钮操作 */
	function handleDetail(row) {
	  detailFlag.value = true;
	  title.value = "设备详情";
	  form.value.physicalAddress = row.physicalAddress;	
	}
	getRegionTree();
	getList();
</script>

<style>

</style>